<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
				@clickLeft="gaoback"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<!-- <view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view> -->
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<view class="titleBox">
				<view class="titleBoxcenter"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logoBanben.png"></image></view>
				<view :style="{ opacity: yanshi ? 1 : 0 }" class="logoTitle">CTW CARGO</view>
				<view :style="{ opacity: yanshi ? 1 : 0 }" class="versionTitle">Version: {{ version }}</view>
				<view :style="{ opacity: yanshi ? 1 : 0 }" class="versionTitle">WgtVersion: {{ wgtVersion }}</view>
			</view>
			<view class="bottomBoxTop">
				<view class="bottomBoxList" v-for="item in list" :key="item.id" @tap="btnItem(item)">
					<view class="bottomBoxListL">{{ item.title }}</view>
					<view class="bottomBoxListR">
						<uni-icons v-if="item.icon" :type="item.icon" size="16"></uni-icons>
						<view v-else>{{ item.titleR }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 字体切换 -->
		<uni-popup ref="fontPopup" type="center" :animation="false">
			<view class="accountPopupBox">
				<view
					class="accountPopupBoxItem"
					:style="{ color: item.disabled ? '#283A7D' : '#CBCBCB' }"
					v-for="item in customerList"
					:key="item.title"
					@tap="accountChange(item)"
				>
					<view :style="{ fontSize: item.size + 'px' }">123 ABC 你我她</view>
					<view style="font-weight: 700;">{{ item.title }}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import baseFont from '@/utils/baseFont.js';
import { getStorage } from '@/utils/setStorage.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			version: '1.0.0',
			wgtVersion: '1.0.0',
			fileSizeString: '0 B',
			yanshi: false,
			list: [
				{
					id: 1,
					title: this.$t('me').ctwfont14,
					titleR: '',
					icon: 'forward'
				},
				{
					id: 2,
					title: this.$t('me').ctwfont15,
					titleR: '0 B',
					icon: ''
				},
				{
					id: 3,
					title: this.$t('me').ctwfont16,
					titleR: '',
					icon: 'forward'
				}
			],
			// 字体大小
			customerList: [
				{
					title: '特大',
					size: 16,
					disabled: false
				},
				{
					title: '大',
					size: 14,
					disabled: false
				},
				{
					title: '正常',
					size: 12,
					disabled: false
				}
			]
		};
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		this.getCancellation();
		this.getcache();
		this.getFontSize();
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
		this.version = plus.runtime.version;
		plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
			that.wgtVersion = wgtinfo.version;
		});
		setTimeout(() => {
			this.yanshi = true;
		}, 500);
	},
	mounted() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		}
	},
	watch: {
		fileSizeString: {
			deep: true,
			handler(newVal, oldVal) {
				if (newVal) {
					this.list.forEach(item => {
						if (item.id == 2) {
							item.titleR = newVal;
						}
					});
				}
			}
		}
	},
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/home/index`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/home/index`);
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				this.gaoback();
			}
		},
		// 获取缓存大小
		getcache() {
			let that = this;
			this.$nextTick(function() {
				plus.cache.calculate(function(size) {
					let cacheSize = parseInt(size);
					if (cacheSize == 0) {
						that.fileSizeString = '0 B';
					} else if (cacheSize < 1024) {
						that.fileSizeString = cacheSize + ' B';
					} else if (cacheSize < 1048576) {
						that.fileSizeString = (cacheSize / 1024).toFixed(2) + ' KB';
					} else if (cacheSize < 1073741824) {
						that.fileSizeString = (cacheSize / 1048576).toFixed(2) + ' MB';
					} else {
						that.fileSizeString = (cacheSize / 1073741824).toFixed(2) + ' GB';
					}
				});
			});
		},
		// 清除缓存
		clearCache() {
			let that = this;
			let os = plus.os.name;
			if (os == 'Android') {
				let main = plus.android.runtimeMainActivity();
				let sdRoot = main.getCacheDir();
				let files = plus.android.invoke(sdRoot, 'listFiles');
				let len = files.length;
				for (let i = 0; i < len; i++) {
					let filePath = '' + files[i]; // 没有找到合适的方法获取路径，这样写可以转成文件路径
					plus.io.resolveLocalFileSystemURL(
						filePath,
						function(entry) {
							if (entry.isDirectory) {
								entry.removeRecursively(
									function(entry) {
										//递归删除其下的所有文件及子目录
										uni.showToast({
											title: that.$t('me').ctwfont19,
											duration: 2000,
											icon: 'none'
										});
										that.getcache(); // 重新计算缓存
									},
									function(e) {
										console.log(e.message);
									}
								);
							} else {
								entry.remove();
							}
						},
						function(e) {
							console.log(that.$t('me').ctwfont20);
						}
					);
				}
			} else {
				// ios
				plus.cache.clear(function() {
					uni.showToast({
						title: that.$t('me').ctwfont19,
						duration: 2000,
						icon: 'none'
					});
					that.getcache();
				});
			}
		},
		btnItem(item) {
			if (item.id == 1) {
				this.$refs.fontPopup.open();
			} else if (item.id == 2 && this.fileSizeString !== '0 B') {
				this.clearCache();
			} else if (item.id == 3) {
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						this.update(0);
						break;
					case 'ios':
						this.update(1);
						break;
				}
			} else if (item.id == 4) {
				const that = this;
				uni.showModal({
					title: this.$t('me').ctwfont24,
					content: this.$t('me').ctwfont25,
					confirmText: this.$t('me').ctwfont29,
					cancelText: this.$t('me').ctwfont30,
					success: function(res) {
						if (res.confirm) {
							that.setCancellation();
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		// 切换语言
		async accountChange(e) {
			// const languageFlag = getStorage('language') || 'th';
			if (e.title === '特大' && e.size === 16) {
				this.setRootFontSize(e.size + 'px');
			} else if (e.title === '大' && e.size === 14) {
				this.setRootFontSize(e.size + 'px');
			} else {
				this.setRootFontSize(e.size + 'px');
			}
			this.$refs.fontPopup.close();
			plus.runtime.restart();
		},
		// 获取字体大小
		getFontSize() {
			const size = this.getRootFontSize().split('px')[0];
			this.customerList.forEach(item => {
				if (item.size === Number(size)) {
					item.disabled = true;
				} else {
					item.disabled = false;
				}
			});
		},
		// 获取版本
		async update(val) {
			const params = {
				appType: val
			};
			const { data: res } = await this.$http(true, 'api/app/getNewest', params, 'GET');
			if (res.errno === 0) {
				if (res.data) {
					const version = plus.runtime.version.split('.').join(''); // 获取当前app版本号
					const newversion = res.data.appVersion.split('.').join('');
					if (version < newversion) {
						plus.runtime.openURL(res.data.appUrl);
					} else {
						uni.showToast({
							title: this.$t('me').ctwfont17,
							icon: 'none'
						});
					}
				} else {
					uni.showToast({
						title: this.$t('me').ctwfont18,
						icon: 'none'
					});
				}
			} else {
				uni.showToast({
					title: this.$t('me').ctwfont18,
					icon: 'none'
				});
			}
		},
		// 注销账号
		async setCancellation() {
			const { data: res } = await this.$http(true, 'api/user/logout', '', 'GET');
			if (res.errno != 0) {
				uni.showToast({
					title: this.$t('me').ctwfont26,
					icon: 'none'
				});
			} else {
				uni.showToast({
					title: this.$t('me').ctwfont27,
					icon: 'none'
				});
			}
		},
		// 用户登录提供注销账号功能
		getCancellation() {
			const token = getStorage('token');
			if (token === undefined || token === null || token === '') {
				this.list = [
					{
						id: 1,
						title: this.$t('me').ctwfont14,
						titleR: '',
						icon: 'forward'
					},
					{
						id: 2,
						title: this.$t('me').ctwfont15,
						titleR: '0 B',
						icon: ''
					},
					{
						id: 3,
						title: this.$t('me').ctwfont16,
						titleR: '',
						icon: 'forward'
					}
				];
			} else {
				this.list = [
					{
						id: 1,
						title: this.$t('me').ctwfont14,
						titleR: '',
						icon: 'forward'
					},
					{
						id: 2,
						title: this.$t('me').ctwfont15,
						titleR: '0 B',
						icon: ''
					},
					{
						id: 3,
						title: this.$t('me').ctwfont16,
						titleR: '',
						icon: 'forward'
					},
					{
						id: 4,
						title: this.$t('me').ctwfont28,
						titleR: '',
						icon: 'forward'
					}
				];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}
}
.zhuti {
	padding: 0 10px;
	.titleBox {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		height: 300px;
		position: relative;
		.titleBoxcenter {
			position: absolute;
			top: 15%;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: 100px;
			border-radius: 15px;
			overflow: hidden;
			background-color: #f2f2f2;
		}
		.logoTitle {
			margin-top: 90px;
			font-size: $uni-font-size-custom-j;
			font-weight: 700;
			color: #CD001B;
		}
		.versionTitle {
			font-size: $uni-font-size-custom-f;
			font-weight: 700;
			color: #CD001B;
		}
	}
	.bottomBoxTop {
		border-top: 1px solid #ddd;
		.bottomBoxList {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #ddd;
			padding: 10px 5px;
			.bottomBoxListL {
				font-size: $uni-font-size-custom-e;
			}
			.bottomBoxListR {
				font-size: $uni-font-size-custom-e;
				color: #ccc;
			}
		}
	}
}
.accountPopupBox {
	width: 705rpx;
	min-height: 50px;
	max-height: 200px;
	background-color: #fff;
	border-radius: 5px;
	padding: 0 15px;
	box-sizing: border-box;
	overflow-y: scroll;
	.accountPopupBoxItem {
		height: 50px;
		padding: 0 15px;
		color: #283a7d;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #cbcbcb;
	}
	.accountPopupBoxItem:last-child {
		border-bottom: none;
	}
}
</style>
